<template>
  <view>
    <u-navbar title="订单详情" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <!-- 图标 -->
    <view class="" style="margin: 22rpx 28rpx; background: #fff; border-radius: 20rpx; display: flex; align-items: center; justify-content: space-around; padding: 50rpx 0">
      <view class="" style="font-size: 28rpx; text-align: center">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/l0.png" mode="" style="width: 82rpx; height: 82rpx"></image>
        <view class="">开方</view>
      </view>
      <view class="" style="font-size: 28rpx; text-align: center">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/l1.png" mode="" style="width: 82rpx; height: 82rpx"></image>
        <view class="">划价</view>
      </view>
      <view class="" style="font-size: 28rpx; text-align: center">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/l2.png" mode="" style="width: 82rpx; height: 82rpx"></image>
        <view class="">支付</view>
      </view>
      <view class="" style="font-size: 28rpx; text-align: center" v-if="data.drgus_way == 2">
        <image
          :src="
            data.drugs_status == 4 || data.drugs_status == 5 ? 'https://wenzhen.jiangkukeji360.com/static/index/t0s.png' : 'https://wenzhen.jiangkukeji360.com/static/index/t0.png'
          "
          mode=""
          style="width: 82rpx; height: 82rpx"
        ></image>
        <view class="">配送中</view>
      </view>

      <view class="" style="font-size: 28rpx; text-align: center" v-if="data.drgus_way == 1">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/t2.png" mode="" style="width: 82rpx; height: 82rpx"></image>
        <view class="">自提</view>
      </view>

      <view class="" style="font-size: 28rpx; text-align: center">
        <image
          :src="data.drugs_status == 5 ? 'https://wenzhen.jiangkukeji360.com/static/index/t1s.png' : 'https://wenzhen.jiangkukeji360.com/static/index/t1.png'"
          mode=""
          style="width: 82rpx; height: 82rpx"
        ></image>
        <view class="">已签收</view>
      </view>
    </view>
    <!-- 收件 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="font-size: 26rpx; display: flex; align-items: center; justify-content: space-between; padding: 36rpx 30rpx">
        <view class="">
          {{ data.clini_address }}
        </view>
        <view class="">
          <text>医生：</text>
          <text style="color: #1a9eff">{{ data.doctor_name }}</text>
        </view>
      </view>
      <!-- 收件人 -->
      <view class="" style="font-size: 28rpx; padding: 0 31rpx 31rpx" v-if="data.drgus_way == 2">
        <text>收件人</text>
        <text style="padding-left: 38rpx">{{ data.t_name }}</text>
        <text style="padding-left: 19rpx">{{ data.t_mobile }}</text>
      </view>
      <view class="" style="font-size: 28rpx; display: flex; padding: 0rpx 31rpx 47rpx 31rpx; border-bottom: 2rpx solid #eeeeee" v-if="data.drgus_way == 2">
        <text class="">地 址</text>
        <text class="" style="padding-left: 31rpx">
          {{ data.t_address }}
        </text>
      </view>
      <view class="" style="font-size: 28rpx; display: flex; padding: 0rpx 31rpx 47rpx 31rpx; border-bottom: 2rpx solid #eeeeee" v-if="data.drgus_way == 1">
        <text class="">自提地址：{{ data.drug_shop_address }}</text>
        <text class="" style="padding-left: 31rpx">
          <!-- {{data.t_address}} -->
        </text>
      </view>
      <!-- 取消 -->
      <view class="" style="padding-top: 20rpx" v-if="data.cancel_time != 0">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">已取消</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ util.timestampToTime(data.cancel_time) }}
        </view>
      </view>
      <!-- 签收 -->
      <view class="" style="padding-top: 20rpx" v-if="data.ok_time != 0">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">已签收</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ util.timestampToTime(data.ok_time) }}
        </view>
      </view>
      <!-- 已配送 -->
      <view class="" style="padding-top: 20rpx" v-if="data.drgus_way == 2 && data.deliver_time != 0">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">已配送</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ util.timestampToTime(data.deliver_time) }}
        </view>
      </view>

      <view class="" style="padding-top: 20rpx" v-if="data.drgus_way == 1 && data.ok_time != 0">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">已自提</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ util.timestampToTime(data.ok_time) }}
        </view>
      </view>

      <!-- 接单 -->
      <view class="" style="padding-top: 20rpx">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">支付完成(请耐心等待药房接单)</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ util.timestampToTime(data.drugs_pay_time) }}
        </view>
      </view>
      <!-- 药房 -->
      <!-- <view class="" style="padding-top: 20rpx;">
				<view class="" style="display: flex;align-items: center;padding: 20rpx 0 13rpx 31rpx;">
					<view class="" style="width: 30rpx;height: 30rpx;border: 1rpx solid #CCCCCC;border-radius: 50%;">
					</view>
					<view class="" style="font-size: 28rpx;color: #666666;padding-left: 19rpx;">
						药房已划价
					</view>
				</view>
				<view class="" style="font-size: 24rpx;color: #999999;padding-left: 77rpx;">
					2022-06-18 15:15:22
				</view>
			</view> -->
      <!-- 医生开方 -->
      <view class="" style="padding-top: 20rpx">
        <view class="" style="display: flex; align-items: center; padding: 20rpx 0 13rpx 31rpx">
          <view class="" style="width: 30rpx; height: 30rpx; border: 1rpx solid #cccccc; border-radius: 50%"></view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-left: 19rpx">医生已开方</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #999999; padding-left: 77rpx">
          {{ data.extract_time_text }}
        </view>
      </view>
      <!-- 按钮 -->
      <view class="" style="display: flex; align-items: center; justify-content: flex-end; padding: 22rpx 19rpx">
        <view class="btn" v-if="data.drugs_status == 3" @tap="show = true">取消订单</view>
        <view class="" v-if="data.drgus_way == 2" style="display: flex; align-items: center">
          <view class="btn" style="margin-left: 22rpx" @tap="look" v-if="data.drugs_status == 4 || data.drugs_status == 5">查看物流</view>
          <view class="btn" style="margin-left: 22rpx" @tap="queren" v-if="data.drugs_status == 3 || data.drugs_status == 4">确认收货</view>
        </view>

        <view class="" v-if="data.drgus_way == 1">
          <view class="btn" style="margin-left: 22rpx" v-if="data.drugs_status == 3 || data.drugs_status == 5" @tap="hxm">核销码</view>
        </view>
      </view>
    </view>
    <!-- 处方 -->
    <view class="" style="margin: 21rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; text-align: center; padding-top: 32rpx">处方</view>
      <view class="" style="display: flex; align-items: center; justify-content: space-around; margin-top: 25rpx">
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">姓名</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ data.patient_name }}
          </view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">性别</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ data.patient_gender == 0 ? '女' : '男' }}
          </view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">年龄</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">{{ data.patient_age }}岁</view>
        </view>
        <view class="" style="text-align: center">
          <view class="" style="font-size: 24rpx">科室</view>
          <view class="" style="font-size: 28rpx; color: #666666; padding-top: 10rpx">
            {{ data.department_name }}
          </view>
        </view>
      </view>
      <!-- 诊断 -->
      <view class="" style="font-size: 28rpx; padding: 25rpx 29rpx; border-bottom: 1rpx solid #e7e7e7">诊断：{{ data.Illness }}</view>
      <!-- RP：处方西药 -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx">
        <view class="" style="font-size: 28rpx">RP：处方西药</view>
        <view class="" style="font-size: 26rpx; color: #666666">
          {{ data.submit_time_text }}
        </view>
      </view>

      <!-- 药 -->
      <view class="" style="margin: 0 28rpx; background: #f8f8f8" v-for="(i, k) in data.drgus" :key="k">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx 19rpx 24rpx 22rpx">
          <view class="" style="font-size: 28rpx">{{ k + 1 }}、{{ i.drugs_name }}</view>
          <view class="" style="font-size: 24rpx; color: #666666">使用天数：{{ i.usage_days }}天</view>
        </view>
        <view class="" style="font-size: 24rpx; color: #666666; padding-left: 23rpx">药品规格：{{ i.norms }}</view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 23rpx 15rpx 33rpx 24rpx; font-size: 24rpx; color: #666666">
          <view class="">发药剂量：{{ i.number.number }}</view>
          <view class="">用法：{{ i.usage }}</view>
        </view>
      </view>
      <view class="" style="height: 32rpx; border-bottom: 1rpx solid #e7e7e7"></view>
      <!--  -->
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7">医嘱：{{ data.tips }}</view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center">
        医师：
        <image :src="img_url + data.doctor_chapter_img" mode="" style="width: 150rpx; height: 50rpx; padding-left: 30rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center">
        <text>药师：</text>
        <image :src="img_url + data.pharmacist_admin_img" mode="" style="width: 150rpx; height: 50rpx; padding-left: 30rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center">
        调配员：
        <image :src="img_url + data.dispatcher_admin_img" mode="aspectFill" style="width: 150rpx; height: 50rpx; padding-left: 30rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding: 35rpx 31rpx; display: flex; align-items: center">
        发药员：
        <image :src="img_url + data.driver_admin_img" mode="aspectFill" style="width: 150rpx; height: 50rpx; padding-left: 30rpx" v-if="data.driver_admin_img"></image>
        <view class="" v-else>等待发药...</view>
      </view>
    </view>
    <!-- 费用 -->
    <view class="" style="font-size: 28rpx; background: #fff; border-radius: 20rpx; margin: 30rpx 28rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx">
          费用
          <text style="color: #666666; font-size: 24rpx; padding-left: 25rpx">按方开药</text>
        </view>
        <view class="" style="font-size: 26rpx">￥{{ data.drugs_price }}</view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx">运费</view>
        <view class="">￥{{ data.freight_price }}</view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 28rpx">
        <view class="" style="font-size: 28rpx">合计</view>
        <view class="" style="color: #e50014">￥{{ data.final_price }}</view>
      </view>
    </view>
    <view class="" style="font-size: 24rpx; color: #999999; padding-left: 47rpx">订单编号：{{ data.drugs_no }}</view>
    <view class="" style="font-size: 24rpx; color: #999999; padding-left: 47rpx; padding-top: 35rpx">客服电话：{{ data.patient_mobile }}</view>
    <view class="" style="font-size: 24rpx; color: #999999; padding-left: 47rpx; padding-top: 28rpx">物流及药品投诉电话：{{ data.patient_mobile }}</view>
    <u-modal v-model="show" :content="content" :show-cancel-button="true" title="取消订单" @confirm="canle"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      id: null,
      data: {},
      show: false,
      content: '您确定取消订单吗？'
    };
  },
  //方法
  methods: {
    queren() {
      this.api({
        url: '/api/drugs/receipt',
        method: 'post',
        data: {
          order_id: this.id
        }
      }).then((res) => {
        this.ordder();
      });
    },
    hxm() {
      uni.navigateTo({
        url: '/pages/user/code?id=' + this.id
      });
    },
    canle() {
      this.api({
        url: '/api//drugs/cancelOrder',
        method: 'post',
        data: {
          id: this.id
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        this.ordder();
      });
    },
    look() {
      uni.navigateTo({
        url: 'wuliu?name=' + this.data.express_name + '&no=' + this.data.e_order_no
      });
    },
    ordder() {
      this.api({
        url: '/api//drugs/details',
        method: 'post',
        data: {
          id: this.id
        }
      }).then((res) => {
        this.data = res.data;
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.ordder();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #999999;
  border-radius: 31rpx;
  font-size: 28rpx;
  line-height: 62rpx;
  text-align: center;
  color: #666666;
}
</style>
